<template>
  <div class="search">
    <div class="search-top">
      <img src="" alt="">
      <input type="text" placeholder="搜索歌曲,歌手,专辑" v-model="content" v-throttle="search">
    </div>
    <div class="search-res" v-show="content !== ''">
      <IscrollView>
        <ul>
          <li class="res" v-for="(value, index) in songs" :key="index" @click="setMusic(value.id)">
            <img src="" alt="">
            <p>{{value.name}}--{{value.artists[0].name}}</p>
          </li>
        </ul>
      </IscrollView>
    </div>
  </div>
</template>

<script>
import IscrollView from '../components/IscrollView'
import { getSearchList } from '../api'
import { mapActions } from 'vuex'
export default {
  name: 'Search',
  components: {
    IscrollView
  },
  data () {
    return {
      content: '',
      songs: []
    }
  },
  methods: {
    ...mapActions([
      'setFullScreen',
      'setminiplay',
      'setsongs'
    ]),
    setMusic (id) {
      this.setFullScreen(true)
      this.setminiplay(false)
      this.setsongs([id])
    },
    search () {
      // if (this.content === '') {
      //   return
      // }
      console.log('发送请求')
      getSearchList({ keywords: this.content })
        .then((data) => {
          console.log(data)
          this.songs = data.result.songs
        })
        .catch(function (err) {
          console.log(err)
        })
    }
  },
  directives: {
    throttle: {
      // 指令的定义
      inserted: function (el, obj) {
        let timerId = null
        let flag = true
        el.addEventListener('input', function () {
          if (!flag) return
          flag = false
          timerId && clearTimeout(timerId)
          timerId = setTimeout(function () {
            flag = true
            obj.value()
          }, 1000)
        })
      }
    }
  }
}

</script>

<style scoped lang="scss">
  @import "../assets/css/mixin";
  @import "../assets/css/variable";
.search{
  position: fixed;
  left: 0;
  right: 0;
  top: 184px;
  bottom: 0;
  /*background: pink;*/
  .search-top{
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    background: #ebebec;
    border-radius: 30px;
    margin: 20px 30px;
    img{
      width: 40px;
      height: 40px;
      padding: 0 10px;
    }
    input{
      outline: none;
      border: none;
      background: transparent;
      @include font_size($font_medium);
      height: 60px;
      margin-left: 20px;
    }
  }
  .search-res{
    position: fixed;
    top: 280px;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #f00;*/
    overflow: hidden;
    .res{
      display: flex;
      border-bottom: 1px solid #ccc;
      padding: 20px;
      box-sizing: border-box;
      img{
        width: 40px;
        height: 40px;
        margin-left: 20px;
      }
      p{
        @include font_size($font_medium);
        @include font_color();
        margin-left: 20px;
      }
    }
  }
}
</style>
